<template>
  <el-drawer
    class="edit-table"
    title="买家详情"
    :visible.sync="showDrawer"
    :direction="direction"
    :size="'calc(100vw - 780px)'"
    :before-close="close"
  >
    <el-form
      ref="form"
      :model="dataList"
      label-width="100px">
      <el-row :gutter="15">
        <el-col :sm="11">
          <el-form-item label="订单号">
            <div style="color: #05b15a;cursor: pointer" title="点击复制订单" @click="copys(dataList.order_id)">{{dataList.order_id}}</div>
          </el-form-item>
          <el-form-item label="Asin">
            <div>{{dataList.asin}}</div>
          </el-form-item>
          <el-form-item label="产品名称" style="height: 130px">
            <el-tooltip class="item" effect="dark" :content="dataList.product_title" placement="top">
              <div class="info-title">{{dataList.product_title}}</div>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="收货邮箱">
            <el-tooltip class="item" effect="dark" :content="dataList.take_over_email" placement="top">
              <div class="info-title" style="color: #05b15a;cursor: pointer" title="点击复制邮箱" @click="copys(dataList.take_over_email)">{{dataList.take_over_email}}</div>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="收货城市">
            <div>{{dataList.take_over_city}}</div>
          </el-form-item>
          <el-form-item label="收货邮编">
            <div>{{dataList.take_over_postal_code}}</div>
          </el-form-item>
          <el-form-item label="国家市场">
            <div>{{dataList.order_country}}</div>
          </el-form-item>
          <el-form-item label="订单总额">
            <div>{{dataList.all_price}}</div>
          </el-form-item>
          <el-form-item label="用户评论">
            <el-tooltip class="item" effect="dark" :content="dataList.comment" placement="top">
              <div class="info-title">{{dataList.comment}}</div>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="评论页面">
            <div style="color: #05b15a;cursor: pointer"  @click="viewAmazonComment(dataList.asin)">点击查看该Asin的所有评价</div>
          </el-form-item>
          <div>
            <el-alert
              title="访客信息"
              type="success"
              :closable="false">
            </el-alert>
          </div>
          <el-form-item label="IP">
            <div>{{dataList.record_list.ip}}</div>
          </el-form-item>
          <el-form-item label="平台">
            <div>{{dataList.record_list.visitors_platform}}</div>
          </el-form-item>
          <el-form-item label="访问设备">
            <div v-if="dataList.record_list.is_mobile ===1">移动端</div>
            <div v-if="dataList.record_list.is_mobile ===2">PC端</div>
          </el-form-item>
          <el-form-item label="访问时间">
            <div>{{dataList.record_list.create_time}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="购买时间">
            <div>{{dataList.purchase_time}}</div>
          </el-form-item>
          <el-form-item label="sku">
            <div>{{dataList.platform_sku}}</div>
          </el-form-item>
          <el-form-item label="礼品信息" style="height: 130px">
            <div>{{dataList.gift_name}}
            <span v-if="dataList.gift_type_2 ==1">【常规礼品】</span>
            <span v-if="dataList.gift_type_2 ==2">【其他礼品】</span>
            </div>
            <el-popover v-if="dataList.gift_image !==''" placement="top-start" trigger="click">
              <img  :src="dataList.gift_image" alt="" width="300px" height="300px">
              <img  slot="reference" :src="dataList.gift_image" alt="" width="80px" height="80px">
            </el-popover>
          </el-form-item>
          <el-form-item label="收货地址">
            <el-tooltip class="item" effect="dark" :content="dataList.take_over_address" placement="top">
              <div class="info-title" style="color: #05b15a;cursor: pointer" title="点击复制收货地址" @click="copys(dataList.take_over_address)">
                {{dataList.take_over_address}}
              </div>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="收货省/州">
            <div>{{dataList.take_over_state}}</div>
          </el-form-item>
          <el-form-item label="收货国家">
            <div>{{dataList.take_over_country}}</div>
          </el-form-item>
          <el-form-item label="买家问卷调查" >
          </el-form-item>
          <el-form-item label="折扣价">
            <div>{{dataList.discount}}</div>
          </el-form-item>
          <el-form-item label="自动匹配教程">
            <div style="color: #05b15a;cursor: pointer"  @click="viewthread">留评匹配评价监控如何使用？助你核查客户是否上评亚马逊</div>
          </el-form-item>
          <div>
            <el-alert
              title="访客信息"
              type="success"
              :closable="false">
            </el-alert>
          </div>
          <el-form-item label="国家">
            <div>{{dataList.record_list.country}}</div>
          </el-form-item>
          <el-form-item label="浏览器">
            <div>{{dataList.record_list.browser}}</div>
          </el-form-item>
          <el-form-item label="访问域名">
            <div>{{dataList.record_list.referrer}}</div>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>

  </el-drawer>
</template>

<script>

export default {
  name: "activate-detail",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    // 栏目数据
    cateList: Array
  },
  components: {},
  data() {
    return {
      showDrawer: this.visible,
      direction: 'rtl',
      // 表单数据
      dataList: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        name: [
          {required: true, message: '请输入文章名称', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择文章状态', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序号', trigger: 'blur'}
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  mounted() {

  },
  watch: {
    data() {
      if (this.data) {
        this.dataList = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.dataList = {};
        this.isUpdate = false;
      }
    }
  },
  methods :{
    copys(connect)
    {
      this.$copyText(connect);
    },
    viewAmazonComment(asin)
    {
      var url = 'https://www.amazon.com/product-reviews/' + asin +'/?ie=UTF8&reviewerType=all_reviews&sortBy=recent';
      window.open(url, '_blank');
    },
    viewthread()
    {
      window.open('https://bbs.zhmj.com/forum.php?mod=viewthread&tid=1', '_blank');
    },
    /* 关闭页面 */
    close(hide) {
      if (hide) {
        hide();
      }
      this.$emit("done");
    }
  }
}

</script>

<style scoped>
::v-deep .el-form-item__label{
  font-size: 14px;
  font-weight: 700;
  color: #222;

}
::v-deep .el-form-item{
  border: 1px solid #EBEEF5;
  margin-bottom: 15px;
}
.info-title {
  width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}

</style>
